<template>
  <page-view class="category-page">
    <page-header title="个人主页"></page-header>
    <div class="content-user">
      <ul>
        <li @click="$router.push({ name: 'UserInfo', param: 1 })">
          <span>个人资料</span><span class="iconfont">&#xe65f;</span>
        </li>
        <li @click="$router.push('/shopCart')">
          <span>地址管理</span><span class="iconfont">&#xe65f;</span>
        </li>
        <li @click="$router.push('/main/order')">
          <span>个人订单</span><span class="iconfont">&#xe65f;</span>
        </li>
        <img
          v-lazy="BaseURL + $store.state.userInfo.user_photo"
          v-if="$store.state.userInfo"
        />
        <li @click="sz">
          <span>设置</span><span class="iconfont">&#xe65f;</span>
        </li>
        <li @click="kf">
          <span>客服</span><span class="iconfont">&#xe65f;</span>
        </li>
      </ul>
    </div>
    <div class="tc">
      <Button type="primary" block class="bottom" @click="tc">退出</Button>
    </div>
  </page-view>
</template>
<script>
import { Button, Dialog, Tag, Toast } from "vant";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
export default {
  components: {
    Button,
    Tag,
  },
  setup() {
    const router = useRouter();
    const store = useStore();
    const tc = () => {
      Dialog.confirm({
        message: "确定要退出登陆吗?",
      }).then(async () => {
        store.commit("setUserInfo", null);
        store.commit("setToken", " ");
        router.push("/");
      });
    };
    const sz = () => {
      Toast("设置");
    };
    const kf = () => {
      Toast("客服");
    };
    return { tc, sz, kf };
  },
};
</script>

<style lang="scss" scoped>
.content-user {
  ul {
    padding: 0%;
    li {
      position: relative;
      display: flex;
      justify-content: space-between;
      line-height: 45px;
      background-color: rgb(248, 245, 240);
      border: 0px;
      border-bottom: 1px solid rgb(111, 108, 108);
      span {
        margin-left: 5px;
        margin-right: 5px;
      }
    }
  }
  img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    position: absolute;
    right: 35px;
    top: 45px;
  }
}
.tc {
  text-align: center;
  padding: 10px;
  .bottom {
    border-radius: 20px;
    margin-top: 50px;
    background-color: rgb(255, 0, 0);
    border: 0px;
  }
}
</style>
